<template>
  <div class="quan">
    <div class="head">
      <h3>查询</h3>
      <div class="xia">
        <div class="li">
          <span>搜索</span>
          <input v-model="keyword" placeholder="输入名称进行搜索" />
        </div>
      </div>
    </div>
    <div class="di">
      <h3>Banner列表</h3>
      <el-table
        ref="multipleTable"
        :data="
          multipleSelection == multipleSelectio
            ? multipleSelection
            : multipleSelectio
        "
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="区域名称" width="120">
        </el-table-column>
        <el-table-column prop="ress" label="说明" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="address" label="状态" show-overflow-tooltip>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="showModal = true"
              type="text"
              size="small"
              @click.native.prevent="
                bianjiRow(
                  scope.$index,
                  multipleSelection == multipleSelectio
                    ? multipleSelection
                    : multipleSelectio
                )
              "
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click.native.prevent="
                deleteRow(
                  scope.$index,
                  multipleSelection == multipleSelectio
                    ? multipleSelection
                    : multipleSelectio
                )
              "
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="modal" v-if="showModal">
      <div class="modal-content">
        <h2>编辑</h2>
        <span>序号:</span><input type="text" v-model="id" />
        <span>区域名称:</span><input type="text" v-model="qu" />
        <span>说明:</span><input type="text" v-model="sho" /> <span>状态:</span
        ><input type="text" v-model="shuo" />
        <div>
          <button @click="handleConfirm">确定</button>
          <button @click="handleCancel">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      multipleSelection: [
        {
          date: "1001",
          name: "大桌",
          ress: "",
          address: "正常",
        },
        {
          date: "2001",
          name: "大桌",
          ress: "",
          address: "正常",
        },
        {
          date: "1001",
          name: "大桌",
          ress: "",
          address: "正常",
        },
        {
          date: "2001",
          name: "大桌",
          ress: "",
          address: "正常",
        },
        {
          date: "1001",
          name: "大桌",
          ress: "",
          address: "正常",
        },
        {
          date: "2001",
          name: "大桌",
          ress: "",
          address: "正常",
        },
        {
          date: "1001",
          name: "大桌",
          ress: "",
          address: "正常",
        },
        {
          date: "2001",
          name: "大桌",
          ress: "",
          address: "正常",
        },
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      showModal: false,
      id: 0,
      qu: 0,
      shuo: 0,
      sho: "",
      keyword: "",
      index: 0,
    };
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleConfirm() {
      this.showModal = false;
      this.multipleSelection[this.index].date = this.id;
      this.multipleSelection[this.index].name = this.qu;
      this.multipleSelection[this.index].ress = this.sho;
      this.multipleSelection[this.index].address = this.shuo;
    },
    handleCancel() {
      console.log("确认操作");
      this.showModal = false;
    },
    bianjiRow(index, rows) {
      this.id = rows[index].date;
      this.qu = rows[index].name;
      this.sho = rows[index].ass;
      this.shuo = rows[index].address;
      this.index = index;
    },
  },
  computed: {
    multipleSelectio() {
      return this.multipleSelection.filter((item) =>
        item.date.includes(this.keyword)
      );
    },
  },
};
</script>

<style scoped>
.head {
  width: 1273px;
  border: 1px solid #000;
  margin-top: 7px;
}
h3 {
  width: 1273px;
  height: 45px;
  background-color: rgb(220, 220, 220);
}
.di {
  width: 1273px;
  border: 1px solid #000;
}
.block {
  margin-left: 400px;
}
.xia {
  height: 119px;
  display: flex;
}
.li {
  line-height: 119px;
  margin-left: 20px;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background-color: #e4e6eb;
  padding: 20px;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: 1;
  position: absolute;
  background-color: #ebeef5;
  z-index: 0;
}
</style>